CSS for Mobile Browsers : Where to Insert the CSS (part 1) - Media Filtering

• <style> tags inside the XHTML or HTML markup

• External stylesheets as .css files

• style attributes inside the tags

The third option might seem like the most efficient approach, but it is not the best one. That said, there are times when it is useful.

<input type="text" name="name" style="-wap-input-format: A*a" />

Warning:

On BlackBerry devices running Device Software 4.5 or earlier, stylesheets can be disabled from the browser or from a corporate policy.

A fourth option (a new way of including an external stylesheet) is specified in the WAP CSS standard, but it is not implemented and not recommended as it offers no advantages. It looks like this:

<?xml-stylesheet href="style.css" media="handheld" type="text/css" ?>

If the website you are creating is a one-page document (a widget, an Ajax mobile application, or just a simple mobile document), it will be faster to include the CSS in the <style> XHTML tag to avoid a request and a rendering delay. The other ideal situation for this technique is if your home page is very different from the other pages in your site. Otherwise, odds are good that external stylesheets will help you manage your site more efficiently.

1. Media Filtering

Is one CSS stylesheet adequate for all devices? Maybe. The first factor to consider is whether we are working on a desktop XHTML site or a mobile-specific one.

1.1. Desktop websites

If we decide to use only one XHTML site for both desktop and mobile devices, our only option for changing the design and layout is the CSS file. This situation is a good fit for the media attribute.

The CSS standard allows us to define more than one stylesheet for the same document, taking into account the possibility of a site being rendered on different types of media. The most used values for the media attribute are screen (for desktops), print (to be applied when the user prints the document), and handheld (for… yes, mobile devices). There are also other values, like tv and braille, but no browsers currently support these.

Great! We’ve found the solution. We can just define two stylesheets, one for screen and one for handheld, and all our problems will be solved. The two stylesheets can define different properties for the same elements, and we can even use display: none to prevent some elements from being shown on mobile devices:

<link rel="stylesheet" type="text/css" media="screen" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

					  

However, this “ideal” situation becomes hell when we test it. Many modern mobile browsers rely on screen stylesheets because they can render any desktop website. And other browsers use screen when they think it is a desktop website and use handheld when they think it is a mobile website, depending on the DOCTYPE, a meta tag, or the user’s view preferences.

Warning:

To further complicate the situation, some mobile browsers (such as Mobile Internet Explorer) use media="handheld" if it is the only value defined, but use media="screen" by default if both are defined. The hack is to define media="Screen", with an uppercase S; this causes Mobile IE to use the handheld option when both are defined.

Table 1 shows the media values selected by the different mobile browsers when both screen and handheld options are defined in the document. Clearly, we can’t rely on the media="handheld" attribute!